<template>
  <div class="auto-scroll-table-container" ref="tableContainer">
    <el-table
      class="auto-scroll-table"
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ 'text-align': 'center' }"
      :max-height="tableHeight"
      :stripe="true"
      :data="tableData"
      @mouseenter="stopScroll"
      @mouseleave="createScroll"
      ref="tableRef"
    >
      <el-table-column
        show-overflow-tooltip="true"
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
      />

      <el-table-column
        prop="tag"
        label="Tag"
        width="100"
        :filters="[
          { text: 'Home', value: 'Home' },
          { text: 'Office', value: 'Office' }
        ]"
        :filter-method="filterTag"
        filter-placement="bottom-end"
      >
        <template #default="scope">
          <el-button
            link
            :type="scope.row.tag === 'Home' ? 'primary' : 'success'"
            size="small"
            @click.prevent="showDetail(scope.$index)"
          >
            {{ scope.row.tag }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="table-footer">
      <!-- <el-button type="primary" @click="handleAdd">新增</el-button>
      <el-button type="primary" @click="handleEdit">编辑</el-button>
      <el-button type="primary" @click="handleDelete">删除</el-button> -->
      <el-pagination layout="prev, pager, next" :total="50" class="el-pagination" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const showDetail = (index) => {
  console.log(index)
  ElMessage({
    type: 'info',
    message: `index: ${index}`
  })
  ElMessageBox.alert('This is a message', 'Title', {
    // if you want to disable its autofocus
    // autofocus: false,
    confirmButtonText: 'OK',
    lockScroll: false, // 禁用滚动锁定，避免页面偏移
    customClass: 'custom-message-box', // 添加自定义类名
    callback: (action) => {
      ElMessage({
        type: 'info',
        message: `action: ${index} - ${action}`
      })
    }
  })
}

// 定义表格列配置

const columns = [
  { prop: 'date', label: '日期', width: '120px' },
  { prop: 'name', label: '姓名', width: '100px' },
  { prop: 'address', label: '地址', width: '160px' }
]

// 生成模拟数据

const generateTableData = () => {
  const data = [
    {
      date: `0${(7 % 9) + 1}-${(8 % 28) + 10}`,
      name: `用${6 + 1}`,
      address: `北京朝阳区`,
      tag: `Home`
    }
  ]

  for (let i = 0; i < 12; i++) {
    data.push({
      date: `2025-0${(i % 9) + 1}-${(i % 28) + 10}`,
      name: `用户${i + 1}`,
      address: `沈阳市建国${i * 10 + 100}号`,
      tag: i % 2 === 0 ? 'Home' : 'Office'
    })
  }

  return data
}

const tableData = ref(generateTableData())
const tableContainer = ref(null)
const tableRef = ref(null)
const parentHeight = ref(0) // 父容器高度

let timer = null

// 计算表格高度
const tableHeight = computed(() => {
  // 减去页脚高度(60px)和一些padding/margin
  return parentHeight.value - 60 - 20
})

// 获取父容器高度
const getParentHeight = () => {
  if (tableContainer.value) {
    // 方法1: 获取父容器的实际高度
    const container = tableContainer.value
    parentHeight.value = container.clientHeight

    // 方法2: 如果需要考虑窗口大小，可以使用以下方式
    // parentHeight.value = window.innerHeight * 0.7 // 使用窗口高度的70%

    // 方法3: 如果需要考虑父元素的padding等，可以这样计算
    // const computedStyle = window.getComputedStyle(container.parentElement)
    // const paddingTop = parseFloat(computedStyle.paddingTop) || 0
    // const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0
    // parentHeight.value = container.parentElement.clientHeight - paddingTop - paddingBottom
  }
}

// 窗口大小改变处理
const handleResize = () => {
  getParentHeight()
}

// 停止滚动

const stopScroll = () => {
  clearInterval(timer)
  timer = null
}

// 创建滚动效果

const createScroll = () => {
  stopScroll() // 先清除已有的定时器

  // 确保DOM已更新

  nextTick(() => {
    // 获取表格滚动容器

    const table = tableRef.value.layout.table.refs

    const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild

    // 设置滚动定时器

    timer = setInterval(() => {
      tableWrapper.scrollTop += 1 // 每次滚动1px

      // 检测是否滚动到了底部

      if (tableWrapper.clientHeight + tableWrapper.scrollTop >= tableWrapper.scrollHeight - 1) {
        tableWrapper.scrollTop = 0 // 回到顶部，实现循环
      }
    }, 100) // 滚动间隔，控制滚动速度
  })
}

// 组件挂载时启动滚动
onMounted(() => {
  // 初始化获取父容器高度
  getParentHeight()

  // 添加窗口大小改变事件监听器
  window.addEventListener('resize', handleResize)

  // 延迟启动滚动，确保DOM已完全渲染
  setTimeout(() => {
    createScroll()
  }, 300)
})

// 组件卸载时清理定时器
onUnmounted(() => {
  stopScroll()
  window.removeEventListener('resize', handleResize)
})
</script>

<!-- 样式优化 为了实现更好的视觉效果，我们需要对表格样式进行定制： -->

<style scoped>
.auto-scroll-table-container {
  /* padding: 2%; */
  width: 100%;
  /* max-width: 1000px; */
  /* margin: 0 auto; */
  height: 100%; /* 固定容器高度 */
  overflow: hidden;
  /* border: 1px solid #e5e7eb; */
}

.auto-scroll-table {
  /* margin-top: 9%; */
  padding-top: 6%;
  padding-bottom: 6%;
  --el-table-border-color: none;
  width: 100%;
}

/*最外层透明*/
.auto-scroll-table-container /deep/ .el-table,
.auto-scroll-table-container /deep/ .el-table__expanded-cell {
  background-color: transparent;
  color: #606266;
}

/* 表格内背景颜色 */
.auto-scroll-table-container /deep/ .el-table th,
.auto-scroll-table-container /deep/ .el-table tr,
.auto-scroll-table-container /deep/ .el-table td {
  background-color: transparent !important;
  /* //表格字体颜色 */
  color: rgba(255, 255, 255, 0.8);
  text-align: center !important; /* 添加 !important 提高优先级 */
}

/* 关键样式：使用深度选择器穿透Element Plus样式 */
::v-deep .el-table {
  height: calc(100% - 30px) !important;
  overflow: hidden;
}

/* 增强的居中对齐样式 */
::v-deep .el-table th > .cell,
::v-deep .el-table td > .cell {
  text-align: center !important; /* 针对单元格内容容器 */
}

::v-deep .el-table th,
::v-deep .el-table td {
  text-align: center !important; /* 直接针对表格单元格 */
}

::v-deep .el-table__body-wrapper {
  max-height: calc(100% - 50px) !important; /* 减去表头高度 */
  overflow-y: auto !important;
  scrollbar-width: none; /* 隐藏Firefox滚动条 */
  -ms-overflow-style: none; /* 隐藏IE滚动条 */
}

/* 表头 */
.auto-scroll-table-container /deep/ .el-table th {
  height: 4vh;
  /* color: rgba(0, 242, 255, 1); */
  color: #00f2ff;
  /* 粗体字 */
  font-weight: bold;
  font-weight: 700;
  text-shadow: 0 0 5px #00f2ff;
  font-size: 1.2vh;
  text-align: center; /* 添加这行使表头居中对齐 */
}

/* 关键样式：使用深度选择器穿透Element Plus样式 */

::v-deep .el-table {
  height: calc(100% - 10px) !important;
  overflow: hidden;
}

::v-deep .el-table__body-wrapper {
  max-height: calc(100% - 0px) !important; /* 减去表头高度 */
  overflow-y: auto !important;
  scrollbar-width: none; /* 隐藏Firefox滚动条 */
  -ms-overflow-style: none; /* 隐藏IE滚动条 */
}

/* 隐藏Chrome滚动条 */

::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  display: none;
}

::v-deep .el-table__header-wrapper {
  overflow: hidden !important; /* 固定表头 */
}

.el-table {
  /* 表格字体颜色 */
  color: white;
  /* 表格边框颜色 */
  /* border: 0.5px solid #758a99; */
  height: 500px;
}
/* 表格内背景颜色 */
.el-table th,
.el-table tr,
.el-table td {
  border: 0;
  background-color: transparent;
}
/* 双数行背景颜色 */
.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #fff;
  background-color: rgba(148, 144, 144, 0.3);
}
/* 使表格背景透明 */
.el-table th,
.el-table tr {
  background-color: transparent;
}
/* 删除表格下横线 */
.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}
/* 表格表头字体颜色 */
.el-table thead {
  color: white;
  font-weight: 500;
  background-color: rgba(50, 133, 185, 0.8);
}

.table-footer {
  height: 60px;
  /* margin-top: 0px; */
  justify-content: right;
}

.el-pagination {
  /* height: 20px; */
  /* margin-top: 10px; */
  justify-content: center;
}

/* 分页组件样式定制 */
::v-deep .el-pagination {
  color: rgb(0, 199, 255); /* 分页控件默认字体颜色 */
}

/* 页码按钮基础样式 */
::v-deep .el-pagination .el-pager li {
  background-color: rgba(10, 20, 30, 0.7); /* 页码按钮背景色 */
  color: rgb(0, 199, 255); /* 页码按钮字体颜色 */
  /* border: 1px solid rgb(0, 199, 255); 页码按钮边框颜色 */
  margin: 0 2px;
}

/* 激活状态的页码按钮 */
::v-deep .el-pagination .el-pager li.is-active {
  background-color: rgb(0, 199, 255); /* 激活状态背景色 */
  color: #0a141e; /* 激活状态字体颜色 */
  font-weight: bold;
  border: 0px solid rgb(0, 199, 255);
}

/* 上一页/下一页按钮 */
::v-deep .el-pagination button {
  background-color: rgba(10, 20, 30, 0.7); /* 按钮背景色 */
  color: rgb(0, 199, 255); /* 按钮字体颜色 */
  border: 0px solid rgb(0, 199, 255); /* 按钮边框颜色 */
}

/* 按钮悬停状态 */
::v-deep .el-pagination button:hover,
::v-deep .el-pagination .el-pager li:hover:not(.is-active) {
  background-color: rgba(0, 199, 255, 0.2); /* 悬停状态背景色 */
  color: rgb(0, 199, 255); /* 悬停状态字体颜色 */
}

/* 禁用状态的按钮 */
::v-deep .el-pagination button:disabled {
  background-color: rgba(10, 20, 30, 0.3);
  color: rgba(0, 199, 255, 0.5);
  border-color: rgba(0, 199, 255, 0.3);
}
</style>

<style scoped>
/* 使用深度选择器确保样式穿透 */
::v-deep .el-message-box.custom-message-box {
  background-color: rgba(10, 20, 30, 0.9) !important;
  color: #00f2ff !important;
  border: 1px solid #00f2ff !important;
  box-shadow: 0 0 20px rgba(0, 242, 255, 0.5) !important;
}

::v-deep .el-message-box.custom-message-box .el-message-box__title {
  color: #00f2ff !important;
  text-shadow: 0 0 5px #00f2ff !important;
  font-weight: bold !important;
}

::v-deep .el-message-box.custom-message-box .el-message-box__content {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 14px !important;
  background-color: transparent !important;
}

::v-deep .el-message-box.custom-message-box .el-button--primary {
  background-color: rgba(0, 242, 255, 0.3) !important;
  color: #00f2ff !important;
  border: 1px solid #00f2ff !important;
  box-shadow: 0 0 5px rgba(0, 242, 255, 0.5) !important;
}

::v-deep .el-message-box.custom-message-box .el-button--primary:hover {
  background-color: rgba(0, 242, 255, 0.5) !important;
  box-shadow: 0 0 15px #00f2ff !important;
}

::v-deep .el-overlay.is-message-box {
  background-color: rgba(0, 0, 0, 0.7) !important;
}
</style>
